<script setup>
import {ref} from "vue";
import {BaseURL} from "../utils/lshttp";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {applyAPI, getSeedingAPI, submitAPI} from "../services/me";
import {useUserInfoStore} from "../stores/modules/userInfo";
import CacheImage from "../components/CacheImage.vue";

const copyPath = () => {
  uni.setClipboardData({
    data: "xhs.lszbg.com",
    success() {
      uni.showToast({title: '链接复制成功', icon: 'none'});
    }
  })
}
const urls1 = ref([
  'https://lsz.lszbg.com/imgs/bonus/wenan.jpg'
]);
const urls2 = ref([
  'https://lsz.lszbg.com/imgs/bonus/test1.png',
  'https://lsz.lszbg.com/imgs/bonus/test2.png',
  'https://lsz.lszbg.com/imgs/bonus/test3.png',

]);
const bg = ref([
  'https://lsz.lszbg.com/imgs/bonus/item_top.png',
  'https://lsz.lszbg.com/imgs/bonus/zc_top.png',
  'https://lsz.lszbg.com/imgs/bonus/address.png',
  'https://lsz.lszbg.com/imgs/bonus/clock.png',
  'https://lsz.lszbg.com/imgs/bonus/gif.png',
  'https://lsz.lszbg.com/imgs/bonus/list.png',
  'https://lsz.lszbg.com/imgs/bonus/nolist.png',
])
const fileList1 = ref([])
const isUploadAll = ref(false)
const isUploadSuccess = ref(true)
const note_link = ref("")
const showGetTip = ref(false)
// 删除图片
const deletePic = (event) => {
  isUploadAll.value = false
  fileList1.value.splice(event.index, 1);
};
// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList1.value.length;
  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  console.log("fileList1--->", fileList1)
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    if (result.status === 0) {
      await uni.showToast({title: result.msg, icon: 'none'});
    }
    console.log("result--->", result)
    let item = fileList1.value[fileListLen];
    fileList1.value.splice(fileListLen, 1, {
      ...item,
      status: result.status ? 'success' : 'fail',
      message: result.status ? '' : '上传失败',
      url: result.result?.path ? result.result?.path : '',
    });
    fileListLen++;
  }
  isUploadAll.value = true
  console.log("fileList2--->", fileList1)
};
const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: BaseURL + '/api/seedingActivity/upload',
      method: 'POST',
      filePath: url,
      name: 'file',
      formData: {
        'user_id': userInfoStore.userId
      },
      header: {
        authorization: uni.getStorageSync('token')
      },
      success: (res) => {
        let data = JSON.parse(res.data)
        resolve(data);
      },
    });
  });
};

const submitImage = () => {
  // 0已报名 1待审核 2审核不通过 3审核通过/已完成
  if (type.value === -1) {
    apply()
    return;
  }
  if (type.value === 1) {
    uni.showToast({title: '截图正在审核中', icon: 'none'});
    return;
  }
  if (type.value === 3) {
    showGetTip.value = true
    // uni.showToast({title: '审核已通过，不可重复报名', icon: 'none'});
    return;
  }
  if (type.value === 4) {
    uni.showToast({title: '活动已过期', icon: 'none'});
    return;
  }
  if (fileList1.value.length < 2) {
    uni.showToast({title: '最少上传两张图片', icon: 'none'});
    return
  }
  if (!isUploadAll.value) {
    uni.showToast({title: '正在上传或未修改截图', icon: 'none'});
    return;
  }
  fileList1.value.forEach((item, index) => {
    if (item.status !== 'success') {
      isUploadSuccess.value = false
    }
  })
  if (!isUploadSuccess.value) {
    uni.showToast({title: '图片上传失败，请重新上传', icon: 'none'});
    return;
  }
  isUploadSuccess.value = true
  submit()
}

const type = ref(-1)
const reason = ref("")
const formData = ref({})
const userInfoStore = useUserInfoStore()
// onShow(async () => {
//   if (userInfoStore.userId) {
//     await getSeeding()
//   }
// })
onLoad(async (options) => {
  if (options?.userId) {
    userInfoStore.setUserId(options.userId)
  } else {
    if (userInfoStore.isLogin()) {
      userInfoStore.setUserId(userInfoStore.userInfo.id)
    }
  }
  await getSeeding()
})

const getSeeding = async () => {
  const data = await getSeedingAPI(userInfoStore.userId)
  const result = data.result
  // 0已报名 1待审核 2审核不通过 3审核通过/已完成
  if (data.result) {
    type.value = result.status
  } else {
    type.value = -1
  }
  reason.value = result?.reason ? result?.reason : "1"
  formData.value.id = result.id
  note_link.value = result?.note_link
  console.log("result?.status", result?.status)
  console.log("result?.reason", result?.reason)
  console.log("type.value", type.value)
  console.log("reason.value", reason.value)
  fileList1.value = []
  if (result.picture_one) {
    fileList1.value.splice(1, 1, {
      ...result,
      status: 'success',
      message: '',
      url: result.picture_one,
    });
  }
  if (result.picture_two) {
    fileList1.value.splice(2, 1, {
      ...result,
      status: 'success',
      message: '',
      url: result.picture_two,
    });
  }
  if (result.picture_three) {
    fileList1.value.splice(3, 1, {
      ...result,
      status: 'success',
      message: '',
      url: result.picture_three,
    });
  }
}
const apply = async () => {
  await applyAPI(userInfoStore.userId)
  const data = await getSeedingAPI(userInfoStore.userId)
  await uni.showToast({title: '报名成功，请在规定时间内上传截图', icon: 'none', duration: 3600});
  const result = data.result
  // 0已报名 1待审核 2审核不通过 3审核通过/已完成
  if (data.result) {
    type.value = result.status
  } else {
    type.value = -1
  }
  reason.value = result?.reason ? result?.reason : ""
  formData.value.id = result.id
}
const submit = async () => {
  formData.value.picture_one = fileList1.value[0]?.url
  formData.value.picture_two = fileList1.value[1]?.url
  formData.value.picture_three = fileList1.value[2]?.url
  formData.value.user_id = userInfoStore.userId
  formData.value.note_link = note_link.value
  console.log("formData.value", formData.value)
  await submitAPI(formData.value)
  const data = await getSeedingAPI(userInfoStore.userId)
  const result = data.result
  // 0已报名 1待审核 2审核不通过 3审核通过/已完成
  if (data.result) {
    type.value = result.status
  } else {
    type.value = -1
  }
  reason.value = result?.reason ? result?.reason : ""
  formData.value.id = result.id
  uni.showToast({title: '提交审核成功', icon: 'none'});
}
const noChange = () => {
  uni.showToast({title: '当前状态不可修改截图', icon: 'none'});
}
</script>

<template>
  <!-- #ifdef H5-->
  <!--  <up-navbar-->
  <!--      bg-color="#ffebe6"-->
  <!--      title="任务详情"-->
  <!--      :autoBack="true"-->
  <!--  >-->
  <!--  </up-navbar>-->
  <!-- #endif -->
  <view>
    <image :src="bg[1]" style="height: 480rpx;width: 750rpx;margin-top: -130rpx"></image>
  </view>
  <view style="height: 10rpx"></view>
  <view v-if="type !== -1" style="margin: 30rpx;position: relative">
    <view class="item_top">
      <image :src="bg[0]" style="height: 60rpx;width: 336rpx;position: absolute"></image>
      <view style="color: white;position: relative;text-align: center;width: 336rpx;margin-top: 10rpx;font-size: 33rpx">
        上传截图
      </view>
    </view>
    <view
        style=" background: linear-gradient(to bottom, #fbb259, #f87033);border-radius: 16px;padding: 10rpx 10rpx;background-color: #FFFFFF">
      <view style="background-color: white;border-radius: 20rpx;padding: 20rpx 30rpx">
        <view style="height: 38rpx"></view>
        <view style="display: flex;align-items: start">
          <view class="one">1</view>
          <view style="margin-top: 3rpx;width: 100%">
            <view class="one_title">上传种草截图</view>
            <view class="one_desc"
                  style="background-color: #FFF8E8;width: 536rpx;border-radius: 20rpx;padding: 20rpx;color: #FF7A00">
              <view>请按照活动要求正确上传</view>
              <view v-if="type === 2">拒绝原因：{{ reason }}</view>
            </view>
            <view v-if="type !== -1" style="margin-top: 28rpx;margin-left: 10rpx;position: relative">
              <up-upload
                  :fileList="fileList1"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="4"
                  multiple
                  :maxCount="3"
              ></up-upload>
              <view v-if="type === 1 || type === 3 || type === 4" @click="noChange"
                    style="background-color: #1db9ff01;height: 100%;width: 100%;position: absolute;top: 0;z-index: 100"></view>
            </view>
          </view>
        </view>
        <view style="display: flex;align-items: start;margin-top: 20rpx">
          <view class="one">2</view>
          <view style="margin-top: 3rpx">
            <view class="one_title">作品链接</view>
            <view class="one_desc" style="display: flex;align-items: center">
              <view style="font-size: 28rpx;color: black;margin-right: 28rpx"> 作品链接</view>
              <u-input
                  style="width: 100%"
                  v-model="note_link"
                  type="text"
                  border="none"
                  placeholderStyle="divcolor"
                  :placeholder="'请输入输入或粘贴作品链接'"
              />
            </view>
          </view>
        </view>
        <view style="height: 1px;background: #EBEBEB;width: 100%;margin-top: 20rpx"></view>
        <view style="display: flex;align-items: start;margin-top: 20rpx;color: #FF7A00;font-size: 24rpx">
          温馨提示：请到您发布种草的平台，复制作品链接，输入 或粘贴到上面输入框内
        </view>
        <view style="height: 10rpx"></view>
      </view>
    </view>
  </view>
  <view style="height: 1rpx"></view>
  <view style="margin: 30rpx;position: relative">
    <view class="item_top">
      <image :src="bg[0]" style="height: 60rpx;width: 336rpx;position: absolute"></image>
      <view style="color: white;position: relative;text-align: center;width: 336rpx;margin-top: 10rpx;font-size: 33rpx">
        活动流程
      </view>
    </view>
    <view style="border: 8rpx #FED79C solid;padding: 20rpx 30rpx;border-radius: 20rpx;background-color: #FFFFFF">
      <view style="height: 38rpx"></view>
      <view style="display: flex;align-items: start">
        <view class="one">1</view>
        <view style="margin-top: 3rpx">
          <view class="one_title">抢单完成1个订单</view>
          <view class="one_desc">
            霸王餐和官返订单均可
          </view>
        </view>
      </view>
      <view style="display: flex;align-items: start;margin-top: 20rpx">
        <view class="one">2</view>
        <view style="margin-top: 3rpx">
          <view class="one_title">发布小红书种草内容</view>
          <view class="one_desc">
            小红书粉丝不低于30，发布不少于3图+50字精美内容推荐;推荐领食周边购平台;必须关联话题
            <text style="color: #FA642B;font-weight: bold"> #领食周边购，#外卖霸王餐，#美团超级返，#美团霸王餐</text>
          </view>
        </view>
      </view>
      <view style="display: flex;align-items: start;margin-top: 20rpx">
        <view class="one">3</view>
        <view style="margin-top: 3rpx">
          <view class="one_title">截图提交种草内容审核</view>
          <view class="one_desc">
            截图己发布的种草内容至平台审核，参考截
          </view>
          <view class="one_desc">
            图如下：
          </view>
          <view style="font-size: 26rpx;margin-left: 10rpx;margin-top: 20rpx;color: #888888;display: flex">
            <up-album :urls="urls2" space="38rpx" multipleSize="158rpx" radius="10rpx"></up-album>
          </view>
        </view>
      </view>
      <view style="display: flex;align-items: start;margin-top: 20rpx">
        <view class="one">4</view>
        <view style="margin-top: 3rpx">
          <view class="one_title">添加客服微信，领100元奖励</view>
          <view class="one_desc">
            添加平台活动客服微信，发送种草截图参与评选。被选中精美笔记可
            <text style="color: #FA642B;font-weight: bold">领取100元奖励;</text>
          </view>
        </view>
      </view>
      <view @click="showGetTip = true"
            style="padding: 10rpx 30rpx;background-color: #f87234;border-radius: 60rpx;color: white;text-align: center;margin-top: 10rpx">
        添加客服
      </view>
      <view style="height: 10rpx"></view>
    </view>
  </view>

  <view style="height: 1rpx"></view>
  <view style="margin: 30rpx;position: relative">
    <view class="item_top">
      <image :src="bg[0]" style="height: 60rpx;width: 336rpx;position: absolute"></image>
      <view style="color: white;position: relative;text-align: center;width: 336rpx;margin-top: 10rpx;font-size: 33rpx">
        活动要求
      </view>
    </view>
    <view style="border: 8rpx #FED79C solid;padding: 20rpx 30rpx;border-radius: 20rpx;background-color: #FFFFFF">
      <view style="height: 38rpx"></view>
      <view style="display: flex;align-items: start">
        <image src="https://lsz.lszbg.com/imgs/bonus/note1@2x.png" style="width: 46rpx;height: 46rpx"></image>
        <view style="margin-top: 3rpx">
          <view class="one_title">活动时间</view>
          <view class="one_desc">
            2025年3月11日0:00至2025年3月31日23:59分
          </view>
        </view>
      </view>
      <view style="display: flex;align-items: start;margin-top: 20rpx">
        <image src="https://lsz.lszbg.com/imgs/bonus/note2@2x.png" style="width: 46rpx;height: 46rpx"></image>
        <view style="margin-top: 3rpx">
          <view class="one_title">活动范围</view>
          <view class="one_desc">
            全国
          </view>
        </view>
      </view>
      <view style="display: flex;align-items: start;margin-top: 20rpx">
        <image src="https://lsz.lszbg.com/imgs/bonus/note3@2x.png" style="width: 46rpx;height: 46rpx"></image>
        <view style="margin-top: 3rpx">
          <view class="one_title">活动奖励</view>
          <view class="one_desc">
            20元，附加精美笔记最高100元
          </view>
        </view>
      </view>
      <view style="height: 10rpx"></view>
    </view>
  </view>

  <view style="height: 1rpx"></view>
  <view style="margin: 30rpx;position: relative">
    <view class="item_top">
      <image :src="bg[0]" style="height: 60rpx;width: 336rpx;position: absolute"></image>
      <view style="color: white;position: relative;text-align: center;width: 336rpx;margin-top: 10rpx;font-size: 33rpx">
        审核要求
      </view>
    </view>
    <view style="border: 8rpx #FED79C solid;padding: 20rpx 30rpx;border-radius: 20rpx;background-color: #FFFFFF">
      <view style="height: 38rpx"></view>
      <view style="display: flex;align-items: start">
        <view style="flex: 1">
          <image src="https://lsz.lszbg.com/imgs/bonus/note4@2x.png" style="width: 46rpx;height: 46rpx"></image>
        </view>
        <view style="margin-top: 3rpx">
          <view class="one_title">审核要求</view>
          <view class="one_desc">
            发布种草文案后，
            <text class="text_color">截图不低于2张图片</text>
            上传审核，包括上传笔记分享链接；具体截图规范可参照任务步骤第3点；内容需
            <text class="text_color">要公开可见,不可以设置私密，不分可见等权限，不可删除种草内容</text>
            及其他违规行为。
          </view>
          <view class="one_desc" style="margin-top: 16rpx">
            参与活动后再平台抢单并完成订单，前往小红书发布种草内容推荐平台；
            <text class="text_color">必须按照步骤第2点要求进行发布，否则审核可能不通过；</text>
            笔记审核通过后奖励自动到账领食钱包余额，可自主提现。
          </view>
        </view>
      </view>
      <view style="display: flex;align-items: start;margin-top: 20rpx">
        <view style="flex: 1">
          <image src="https://lsz.lszbg.com/imgs/bonus/note5@2x.png" style="width: 46rpx;height: 46rpx"></image>
        </view>
        <view style="margin-top: 3rpx">
          <view class="one_title">注意事项</view>
          <view class="one_desc">
            1.每人只可参与一次活动。
          </view>
          <view class="one_desc" style="margin-top: 16rpx">
            2.报名后的订单必须完成返款才可提交活动审核。
          </view>
          <view class="one_desc" style="margin-top: 16rpx">
            3.种草文案必须在抢单后发布的，并且内容发布后 不可屏蔽可见、私密、部分可见、删除种草等违 规操作，平台客服会不定期查询关键词审核。
          </view>
          <view class="one_desc" style="margin-top: 16rpx">
            4.一个小红书账号对应一个领食账号，禁止多账号 参与情况，如多个领食账号报名活动同一个小红 书账号发布内容；
          </view>
          <view class="one_desc" style="margin-top: 16rpx">
            5.平台订单存在异常或风控情况的可能会导致活动 审核拒绝，奖励无效；
          </view>
          <view class="one_desc" style="margin-top: 16rpx">
            6.出现违反上述3.4.5情况及平台用户规则、霸王 餐活动规则或其他规则情况的，活动审核拒绝， 活动无效，奖励不予发放，如已发放的平台将追
            回处理。
          </view>
        </view>
      </view>
      <view style="height: 10rpx"></view>
    </view>
  </view>
  <u-popup :show="showGetTip" mode="center" :round="10" width="680rpx" closeable @close="showGetTip = false">
    <view style="text-align: center;margin-top: 30rpx;font-weight: bold;font-size: 28rpx">添加客服</view>
    <view style="margin: 20rpx 60rpx;font-size: 26rpx">截图后使用微信扫码添加客服~</view>
    <view class="popup_box1">
      <cache-image src="https://lsz.lszbg.com/imgs/bonus/ewm.png"
                   style="width: 460rpx;height: 460rpx;padding:0 60rpx;border-radius: 20rpx"></cache-image>
    </view>
    <view style="margin:20rpx 50rpx 30rpx;display: flex">
      <up-button
          @tap="showGetTip = false"
          text="我知道了"
          color="#fd980e"
          size="normal"
          shape="circle"
      ></up-button>
    </view>
  </u-popup>

  <!--  <view style="margin:0 28rpx 38rpx">-->
  <!--&lt;!&ndash;    <up-status-bar></up-status-bar>&ndash;&gt;-->
  <!--    <view style="height: 38rpx"></view>-->
  <!--&lt;!&ndash;    <view style="font-size: 39rpx;text-align: center;font-weight: bold;margin: 38rpx 0;letter-spacing: 3rpx">&ndash;&gt;-->
  <!--&lt;!&ndash;      人人可领8.88元&ndash;&gt;-->
  <!--&lt;!&ndash;    </view>&ndash;&gt;-->
  <!--&lt;!&ndash;    <view style="height: 20rpx"></view>&ndash;&gt;-->
  <!--    <view style="font-size: 28rpx;font-weight: bold">报名后活动步骤：</view>-->
  <!--    <view-->
  <!--        style="min-height: 200rpx;background-color: #FFFFFF;border-radius: 20rpx;margin-top: 16rpx;border: 5rpx solid #ff885f66;padding: 20rpx 30rpx 20rpx 20rpx">-->
  <!--      <view class="step_content">-->
  <!--        <view class="line_step">-->
  <!--          <view class="step">1</view>-->
  <!--          <view class="line"></view>-->
  <!--        </view>-->
  <!--        <view>-->
  <!--          <view class="step_title">抢单完成1个订单</view>-->
  <!--          <view class="desc">霸王餐和官返订单均可</view>-->
  <!--        </view>-->
  <!--      </view>-->
  <!--      <view class="step_content">-->
  <!--        <view class="line_step">-->
  <!--          <view class="step">-->
  <!--            2-->
  <!--          </view>-->
  <!--          <view class="line" style="height: 278rpx">-->
  <!--          </view>-->
  <!--        </view>-->
  <!--        <view>-->
  <!--          <view class="step_title">-->
  <!--            复制文案去小红书发布-->
  <!--          </view>-->
  <!--          <view class="desc" @click="copyPath"-->
  <!--                style="color: #1db9ff;text-decoration: underline;text-underline-offset: 6rpx;line-height: 41rpx">-->
  <!--            复制链接去浏览器按下方步骤复制文案，复制后去小红书发布-->
  <!--          </view>-->
  <!--          <view style="font-size: 26rpx;margin-left: 10rpx;margin-top: 20rpx;color: #888888">-->
  <!--            &lt;!&ndash;            <image style="height: 100rpx;width: 90rpx;border-radius: 10rpx" @click="showImage('https://lsz.lszbg.com/imgs/bonus/wenan.jpg')"&ndash;&gt;-->
  <!--            &lt;!&ndash;                   src="https://lsz.lszbg.com/imgs/bonus/wenan.jpg"></image>&ndash;&gt;-->
  <!--            <view style="height: 180rpx;width: 160rpx;border-radius: 10rpx;overflow: hidden">-->
  <!--              <up-album :urls="urls1"></up-album>-->
  <!--            </view>-->
  <!--          </view>-->
  <!--        </view>-->
  <!--      </view>-->
  <!--      <view class="step_content">-->
  <!--        <view class="line_step">-->
  <!--          <view class="step">-->
  <!--            3-->
  <!--          </view>-->
  <!--          <view class="line" style="height: 260rpx">-->
  <!--          </view>-->
  <!--        </view>-->
  <!--        <view>-->
  <!--          <view class="step_title">-->
  <!--            截图种草内容提交审核-->
  <!--          </view>-->
  <!--          <view class="desc">-->
  <!--            参考下列截图上传-->
  <!--          </view>-->
  <!--          <view style="font-size: 26rpx;margin-left: 10rpx;margin-top: 20rpx;color: #888888;display: flex">-->
  <!--            <up-album :urls="urls2"></up-album>-->
  <!--          </view>-->
  <!--          <view style="font-size: 24rpx;color: #ff5c26;margin-left: 10rpx;margin-top: 20rpx">-->
  <!--            温馨提示：可自主按照发布规则发布种草，精美图片+高质量文案。-->
  <!--          </view>-->
  <!--        </view>-->
  <!--      </view>-->
  <!--    </view>-->
  <!--    <view style="font-size: 28rpx;font-weight: bold;margin-top: 38rpx">活动要求：</view>-->
  <!--    <view-->
  <!--        style="min-height: 100rpx;background-color: #FFFFFF;border-radius: 20rpx;margin-top: 16rpx;padding: 20rpx;font-size: 24rpx;color: #888888;letter-spacing: 3rpx;line-height: 38rpx">-->
  <!--      <view>活动时间：2月6日0:00至2月12日23:59分</view>-->
  <!--      <view> 活动范围：全国城市</view>-->
  <!--      <view>活动奖励：8.88元</view>-->
  <!--    </view>-->
  <!--    <view style="font-size: 28rpx;font-weight: bold;margin-top: 38rpx">审核要求：</view>-->
  <!--    <view-->
  <!--        style="min-height: 200rpx;background-color: #FFFFFF;border-radius: 20rpx;margin-top: 16rpx;padding: 20rpx;font-size: 24rpx;color: #888888;letter-spacing: 3rpx;line-height: 38rpx">-->
  <!--      <view>-->
  <!--        审核要求：发布种草文案后，截图不低于2张内容图片上传审核，具体截图规范可参照任务步骤第③点；内容需要公开可见不可设置私密，不可部分可见，不可删除种草等违规操作；上传审核时发布时间（第一张截图时间）及最后截图时间间隔不得低于8小时；-->
  <!--      </view>-->
  <!--      <view>-->
  <!--        活动内容：参与活动后在平台抢单并完成订单，前往小红书文案地址复制文案保存首图后去小红书发布内容，发布内容是建议截图一张，在8小时后截图第二张包含时间的截图，连同完整内容一并截图上传到活动页面提交审核；-->
  <!--        奖励发放：奖励在活动审核通过后自动到账领食钱包余额，可自主提现。-->
  <!--      </view>-->
  <!--      <view>-->
  <!--        活动注意事项：-->
  <!--      </view>-->
  <!--    </view>-->
  <!--    <view v-if="type === 2" style="font-size: 28rpx;font-weight: bold;margin-top: 38rpx;color: #ff7400">拒绝原因:</view>-->
  <!--    <view v-if="type === 2"-->
  <!--          style="width: 100%;min-height: 60rpx;background-color: #FAFAFA;border-radius: 20rpx;margin-top: 16rpx;padding: 20rpx;font-size: 22rpx;color: #ff7400;letter-spacing: 3rpx;line-height: 38rpx">-->
  <!--      <view>{{ reason }}</view>-->
  <!--    </view>-->
  <!--    <view v-if="type !== -1" style="font-size: 28rpx;font-weight: bold;margin-top: 38rpx">上传截图：</view>-->
  <!--    <view v-if="type !== -1" style="margin-top: 28rpx;margin-left: 10rpx;position: relative">-->
  <!--      <up-upload-->
  <!--          :fileList="fileList1"-->
  <!--          @afterRead="afterRead"-->
  <!--          @delete="deletePic"-->
  <!--          name="4"-->
  <!--          multiple-->
  <!--          :maxCount="2"-->
  <!--      ></up-upload>-->
  <!--      <view v-if="type === 1 || type === 3 || type === 4" @click="noChange"-->
  <!--            style="background-color: #1db9ff01;height: 100%;width: 100%;position: absolute;top: 0;z-index: 100"></view>-->
  <!--    </view>-->
  <!--    &lt;!&ndash;    0已报名 1待审核 2审核不通过 3审核通过/已完成&ndash;&gt;-->
  <!--    <view @click="submitImage"-->
  <!--          style="border-radius: 60rpx;background-color: #ffdc25;font-size: 26rpx;text-align: center;margin-top: 38rpx;padding: 20rpx;letter-spacing: 6rpx">-->
  <!--      {{-->
  <!--        type === -1 ? '立即报名' : type === 0 ? '提交审核' : type === 1 ? '待审核' : type === 2 ? '重新提交审核' : type === 3 ? '已参与' : '活动已过期'-->
  <!--      }}-->
  <!--    </view>-->
  <!--    <view style="height: 88px">-->
  <!--    </view>-->
  <!--    <up-safe-bottom></up-safe-bottom>-->
  <!--  </view>-->
  <view style="height: 168rpx"></view>
  <view style="position: fixed;bottom: 0;z-index: 2;background: white">
    <view @click="submitImage"
          style="background-color: #F97632;width: 690rpx;text-align: center;color: white;padding: 20rpx 0;margin:20rpx 30rpx;border-radius: 60rpx">
      {{
        type === -1 ? '立即报名' : type === 0 ? '提交审核' : type === 1 ? '待审核' : type === 2 ? '重新提交审核' : type === 3 ? '已完成，添加客服领红包' : '活动已过期'
      }}
    </view>
    <up-safe-bottom></up-safe-bottom>
  </view>
</template>
<style>
page {
  background-color: #FFF7E1;
}
</style>
<style scoped lang="scss">
.navbar {
  z-index: 1000;
  width: 100%;

  .back_content {
    display: flex;
    align-items: center;
    height: 44px;
    background-color: #ffebe6;
  }
}

.text_color {
  color: #FA642B;
  font-weight: bold;
}

.one {
  width: 22rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #FF7A01;
}

.one::after {
  content: "";
  display: block;
  background: linear-gradient(90deg, #FFEE9B 60%, rgba(216, 216, 216, 0) 100%);
  width: 38rpx;
  height: 13rpx;
  border-radius: 30rpx;
  margin-top: -15rpx;
  margin-left: -10rpx;
}

.one_title {
  margin-left: 16rpx;
  height: 42rpx;
  font-weight: bold;
  font-size: 30rpx;
  color: #333333;
  line-height: 42rpx;
}

.one_desc {
  margin-left: 16rpx;
  font-weight: 400;
  font-size: 26rpx;
  color: #666666;
  line-height: 40rpx;
  margin-top: 6rpx;
}

.item_top {
  position: absolute;
  top: 0;
  z-index: 1;
  margin-left: 182rpx;
  margin-top: -20rpx;
}

.line_step {
  width: 38rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.step_content {
  display: flex;
  align-items: start;
  margin-top: 20rpx;
}

.step {
  background-color: #ff7400;
  width: 38rpx;
  height: 38rpx;
  font-size: 24rpx;
  text-align: center;
  line-height: 41rpx;
  border-radius: 30rpx;
  color: #FFFFFF;
}

.line {
  height: 80rpx;
  margin-top: 16rpx;
  border-left: #fd8f68 4rpx dashed;
}

.step_title {
  font-size: 26rpx;
  margin-left: 10rpx;
  font-weight: bold;
}

.desc {
  font-size: 26rpx;
  margin-left: 10rpx;
  margin-top: 20rpx;
  color: #888888;
}
</style>